<template>
  <div class="statistics-container">
    <div class="statistics-header">
      <div class="header-content">
        <h1>面试成绩详情</h1>
        <p>查看您的题目作答详情和解析</p>
      </div>
      <div class="header-actions">
        <el-button @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>
    </div>
    
    <!-- 成绩概览 -->
    <div class="performance-overview">
      <div class="overview-card">
        <div class="card-header">
          <h3>总体表现</h3>
        </div>
        
        <div class="overview-stats">
          <div class="stat-item">
            <div class="stat-circle">
              <el-progress 
                type="circle" 
                :percentage="overallAccuracy" 
                :width="80"
                :stroke-width="6"
                :color="getAccuracyColor(overallAccuracy)"
              />
            </div>
            <div class="stat-info">
              <h4>总体正确率</h4>
              <p>{{ overallAccuracy }}%</p>
            </div>
          </div>
          
          <div class="stat-item">
            <div class="stat-number">{{ totalQuestions }}</div>
            <div class="stat-label">总题目数</div>
          </div>
          
          <div class="stat-item">
            <div class="stat-number">{{ correctAnswers }}</div>
            <div class="stat-label">正确回答</div>
          </div>
          
          <div class="stat-item">
            <div class="stat-number">{{ avgTime }}s</div>
            <div class="stat-label">平均用时</div>
          </div>
        </div>
      </div>
      
      <!-- 各阶段表现 -->
      <div class="stage-performance">
        <h3>各阶段表现</h3>
        <div class="stage-cards">
          <div v-for="stage in stageStats" :key="stage.id" class="stage-card">
            <div class="stage-header">
              <el-tag :type="getStageTagType(stage.id)" size="small">
                {{ stage.name }}
              </el-tag>
              <span class="stage-accuracy">{{ stage.accuracy }}%</span>
            </div>
            <div class="stage-progress">
              <el-progress 
                :percentage="stage.accuracy" 
                :stroke-width="6"
                :color="getAccuracyColor(stage.accuracy)"
              />
            </div>
            <div class="stage-details">
              <span>{{ stage.correct }}/{{ stage.total }}</span>
              <span class="stage-time">平均 {{ stage.avgTime }}s</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 题目列表 -->
    <div class="questions-section">
      <div class="section-header">
        <h3>题目详情 ({{ questions.length }})</h3>
      </div>
      
      <div class="questions-list">
        <el-table :data="questions" stripe style="width: 100%">
          <el-table-column prop="title" label="题目" width="200" />
          <el-table-column prop="stage" label="阶段" width="100">
            <template #default="scope">
              <el-tag :type="getStageTagType(scope.row.stage)" size="small">
                {{ getStageText(scope.row.stage) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.status)">
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="score" label="得分" width="80">
            <template #default="scope">
              <span :class="getScoreClass(scope.row.score)">
                {{ scope.row.score }}分
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="date" label="答题时间" width="150">
            <template #default="scope">
              {{ formatDate(scope.row.date) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button 
                type="primary" 
                size="small" 
                @click="viewQuestionDetail(scope.row)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'

export default {
  name: 'StatisticsView',
  components: {
    ArrowLeft
  },
  setup() {
    const router = useRouter()
    
    // 响应式数据
    const totalQuestions = ref(45)
    const correctAnswers = ref(35)
    const overallAccuracy = ref(78)
    const avgTime = ref(45)
    
    // 各阶段统计
    const stageStats = ref([
      {
        id: 'logic',
        name: '逻辑能力',
        accuracy: 85,
        correct: 12,
        total: 15,
        avgTime: 38
      },
      {
        id: 'innovation',
        name: '创新能力',
        accuracy: 78,
        correct: 8,
        total: 10,
        avgTime: 52
      },
      {
        id: 'professional',
        name: '专业技能',
        accuracy: 88,
        correct: 10,
        total: 12,
        avgTime: 48
      },
      {
        id: 'pressure',
        name: '压力应对',
        accuracy: 62,
        correct: 5,
        total: 8,
        avgTime: 41
      }
    ])
    
    // 题目数据
    const questions = ref([
      {
        id: 1,
        title: '算法复杂度分析',
        stage: 'logic',
        status: 'correct',
        score: 10,
        date: '2024-01-20T10:30:00'
      },
      {
        id: 2,
        title: '数据结构选择',
        stage: 'logic',
        status: 'incorrect',
        score: 0,
        date: '2024-01-20T11:00:00'
      },
      {
        id: 3,
        title: '创新产品设计',
        stage: 'innovation',
        status: 'partial',
        score: 7,
        date: '2024-01-19T14:30:00'
      }
    ])
    
    // 方法
    const goBack = () => {
      router.go(-1)
    }
    
    const getAccuracyColor = (accuracy) => {
      if (accuracy >= 90) return '#67c23a'
      if (accuracy >= 80) return '#409eff'
      if (accuracy >= 70) return '#e6a23c'
      return '#f56c6c'
    }
    
    const getStageTagType = (stage) => {
      const typeMap = {
        'logic': 'primary',
        'innovation': 'success',
        'professional': 'warning',
        'pressure': 'danger'
      }
      return typeMap[stage] || 'info'
    }
    
    const getStageText = (stage) => {
      const textMap = {
        'logic': '逻辑能力',
        'innovation': '创新能力',
        'professional': '专业技能',
        'pressure': '压力应对'
      }
      return textMap[stage] || stage
    }
    
    const getStatusTagType = (status) => {
      const typeMap = {
        'correct': 'success',
        'incorrect': 'danger',
        'partial': 'warning',
        'incomplete': 'info'
      }
      return typeMap[status] || 'info'
    }
    
    const getStatusText = (status) => {
      const textMap = {
        'correct': '正确',
        'incorrect': '错误',
        'partial': '部分正确',
        'incomplete': '未完成'
      }
      return textMap[status] || status
    }
    
    const getScoreClass = (score) => {
      if (score >= 9) return 'score-excellent'
      if (score >= 7) return 'score-good'
      if (score >= 5) return 'score-average'
      return 'score-poor'
    }
    
    const formatDate = (dateString) => {
      return new Date(dateString).toLocaleDateString('zh-CN', {
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
    
    const viewQuestionDetail = (question) => {
      router.push({
        path: '/candidate/question-detail',
        query: { id: question.id }
      })
    }
    
    return {
      totalQuestions,
      correctAnswers,
      overallAccuracy,
      avgTime,
      stageStats,
      questions,
      goBack,
      getAccuracyColor,
      getStageTagType,
      getStageText,
      getStatusTagType,
      getStatusText,
      getScoreClass,
      formatDate,
      viewQuestionDetail
    }
  }
}
</script>

<style scoped>
.statistics-container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px;
}

.statistics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content h1 {
  color: #333;
  margin: 0 0 8px 0;
}

.header-content p {
  color: #666;
  margin: 0;
}

.performance-overview {
  margin-bottom: 20px;
}

.overview-card {
  background: white;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h3 {
  color: #333;
  margin: 0;
}

.overview-stats {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 20px;
  align-items: center;
}

.stat-item {
  text-align: center;
}

.stat-circle {
  margin-bottom: 10px;
}

.stat-info h4 {
  color: #333;
  margin: 10px 0 5px 0;
  font-size: 14px;
}

.stat-info p {
  color: #666;
  margin: 0;
  font-size: 12px;
}

.stat-number {
  font-size: 28px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  color: #666;
  font-size: 12px;
}

.stage-performance {
  background: white;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stage-performance h3 {
  color: #333;
  margin: 0 0 20px 0;
}

.stage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.stage-card {
  padding: 16px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  background: #fafafa;
}

.stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.stage-accuracy {
  font-weight: 600;
  color: #333;
}

.stage-progress {
  margin-bottom: 10px;
}

.stage-details {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
}

.questions-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  color: #333;
  margin: 0;
}

.questions-list {
  margin-bottom: 20px;
}

.score-excellent { color: #67c23a; font-weight: 600; }
.score-good { color: #409eff; font-weight: 600; }
.score-average { color: #e6a23c; font-weight: 600; }
.score-poor { color: #f56c6c; font-weight: 600; }

/* 响应式设计 */
@media (max-width: 768px) {
  .overview-stats {
    grid-template-columns: 1fr;
  }
  
  .stage-cards {
    grid-template-columns: 1fr;
  }
}
</style> 